<template>
    <div class="trajectoryMap">
        <div class="signsData-title">
            <span>轨迹地图</span>
            <a-date-picker :value="value" style="width: 160px;" :allowClear="false" @change="timeOnChange"/>
        </div>
        <div class="trajectoryMap-map">
            <MapLoading ref="MapLoading"/>
            <div id="trajectoryMap" style="width: 100%;height: 100%;"></div>
            <div class="trajectoryMap-map-manipulation" v-if="!loading">
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>开始/重新播放</span>
                    </template>
                    <kIcon type="iconwulianwang-" @click="startAnimation"/>
                </a-tooltip>
                <a-tooltip placement="top">
                    <template slot="title" >
                        <span>暂停播放</span>
                    </template>
                    <kIcon type="iconzanting-yuanshijituantubiao" @click="pauseAnimation"/>
                </a-tooltip>
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>继续播放</span>
                    </template>
                    <kIcon type="iconkaishixunhu" @click="resumeAnimation"/>
                </a-tooltip>
<!--                <a-tooltip placement="top">-->
<!--                    <template slot="title">-->
<!--                        <span>{{follow ? '跟随路线' : '预览路线'}}</span>-->
<!--                    </template>-->
<!--                    <kIcon :type="follow ? 'icongenzong' : 'iconquanping'" @click="setfollow"/>-->
<!--                </a-tooltip>-->
            </div>
        </div>
        <a-card :loading="loading" class="trajectoryMap-line">
            <a-timeline>
                <a-timeline-item v-for="(item, index) in data" :key="index">
                    <p>{{item.dateTime}}</p>
                    <p>{{item.site}}</p>
                </a-timeline-item>
            </a-timeline>
        </a-card>
    </div>
</template>

<script>
    import MapLoading from '@/components/mapLoading';
    import {userMovement} from "@/services/monitoring";
    import moment from "moment";
    import AMap from 'AMap';
    import kIcon from '../../../utils/k-icon';

    export default {
        name: "trajectoryMap",
        components: {
            MapLoading,
            kIcon
        },
        data() {
            return {
                loading: false,
                value: '',
                data: [],
                Map: null,
                Marker: null,
                PolylineOne: null,
                PolylineTow: null,
                pathArr: [],
                follow: true,
                move: false
            }
        },
        created() {
            this.value = moment(new Date().getTime()).format('YYYY-MM-DD');
        },
        mounted() {
            var lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];
            this.Map = new AMap.Map("trajectoryMap", {
                resizeEnable: true,
                center: [116.397428, 39.90923],
                zoom: 17
            });
            this.Marker = new AMap.Marker({
                map: this.Map,
                position: [116.478935, 39.997761],
                icon: require('./site.svg'),
                offset: new AMap.Pixel(-26, -13),
                // offset: new AMap.Pixel(-23, -30),
                autoRotation: true,
                angle: -90,
            });
            // 绘制轨迹
            this.PolylineOne = new AMap.Polyline({
                map: this.Map,
                path: lineArr,
                showDir: true,
                strokeColor: "#28F",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            });

            this.PolylineTow = new AMap.Polyline({
                map: this.Map,
                // path: lineArr,
                strokeColor: "#AF5",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            });
            this.Marker.on('moving', (e) => {
                this.PolylineTow.setPath(e.passedPath);
                // this.Map.setFitView && this.follow && this.Map.setFitView([this.Marker]);
            });
            this.Map.on("complete", () => {
                this.initData();
            });

        },
        methods: {
            setfollow() {
                let move = false;
                if (this.move) {
                    move = true;
                    this.pauseAnimation();
                }
                this.follow = !this.follow;
                if (!this.follow) {
                    this.Map.setFitView()
                } else {
                    this.Map.setFitView([this.Marker]);
                }
                if (move) {
                    setTimeout(() => {
                        this.resumeAnimation();
                    }, 300)
                }
            },
            timeOnChange(v, dateString) {
                this.value = dateString;
                this.Marker.stopMove();
                this.PolylineTow.setPath([]);
                this.initData();
            },
            initData() {
                let _this = this;
                this.loading = true;
                this.$refs['MapLoading'].showLoading();
                userMovement().then(({data}) => {
                    this.data = data.data;
                    let pathArr = []
                    //步行导航
                    let walking = new AMap.Walking({panel: "panel", map: this.Map});
                    walking.search([data.startLng, data.startLat], [data.endLng, data.endLat], function (status, result) {
                        // result即是对应的步行路线数据信息
                        if (status === 'complete') {
                            result['routes'][0]['steps'].forEach(({path}) => {
                                pathArr = pathArr.concat(path)
                            })
                            _this.Marker.setPosition(pathArr[0]);
                            _this.pathArr = pathArr;
                            _this.PolylineOne.setPath(pathArr);
                            _this.loading = false;
                            _this.Map.setFitView();
                            _this.$refs['MapLoading'].hideMapLoading();
                        }
                    });
                })
            },
            startAnimation() {
                this.move = true;
                // if (!this.follow) {
                     this.Map.setFitView()
                // } else {
                //    this.Map.setFitView([this.Marker]);
                // }
                setTimeout(() => {
                    this.Marker.moveAlong(this.pathArr, 1000);
                }, 300)
            },
            pauseAnimation() {
                this.move = false;
                this.Marker.pauseMove();
            },
            resumeAnimation() {
                this.move = true;
                this.Marker.resumeMove();
            },
        }

    }
</script>

<style lang="less">
    .trajectoryMap {
        height: 100%;
        padding-bottom: 15px;
        display: flex;
        flex-direction: column;
        &-map {
            flex: 1;
            position: relative;
            .amap-icon img{
                width: 32px!important;
                border-radius: 50%;
                padding: 2px;
                background: #fff;
                box-shadow: 1px 1px 10px #4CA3FA;
            }
            &-manipulation {
                position: absolute;
                bottom: 0;
                height: 30px;
                opacity: .5;
                background: #000000;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                z-index: 99;
                width: 150px;
                left: 0;
                right: 0;
                margin: auto;
                font-size: 24px;
                color: #fff;
                display: flex;
                justify-content: space-around;
                align-items: center;
                transition: all .3s linear;

                i {
                    cursor: pointer;
                }

                &:hover {
                    box-shadow: 1px -4px 0px #cccccc47;
                    opacity: .8;
                    width: 200px;
                    font-size: 30px;
                    height: 50px;
                }
            }
        }
        &-line {
            height: 200px;
            border: none !important;
            box-sizing: border-box;
            margin-top: 15px;
            overflow: auto;
            overflow-x: hidden;
            background: transparent !important;

            p {
                margin: 0;
                padding: 0;
            }

            .ant-timeline {
                margin: 10px !important;

            }

            .ant-card-body {
                padding: 15px 0 !important;
                margin: 0 !important;
            }
        }

        &-title {
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;

            span {
                color: rgba(80, 80, 80, 1);
                font-size: 16px;
            }
        }
    }
    .trajectoryMap-line::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    .trajectoryMap-line::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
    }
    .trajectoryMap-line::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 10px;
    }
    .trajectoryMap-line:hover{
        &::-webkit-scrollbar-thumb {
            background-color: rgba(204,204,204,0.44);
        }
    }
</style>
